<template>
  <div class="op-container">
    <!-- 合规 -->
    <div class="dialog-ruleGuide">
      <input v-show="false" class="quill-img" type="file" @change="postFile($event)">
      <quill-editor ref="myQuillEditor" v-model.trim="ruleGuideContent.content" :options="editorOption" class="editer" />
    </div>
    <div class="footer"><button v-if="authorityHandle(159)" class="btnStyle" @click="setLegalDeclaration">保存</button></div>
  </div>
</template>
<script>
import { emojiEncode, emojiDecode } from '@/utils/index'
import { setLegalDeclaration, getLegalDeclaration } from '@/api/settings/settings'
import { browserType } from '@/utils/validate'
import { doUploadFile } from '@/api/upload/upload'
export default {
  components: {},
  data() {
    return {
      ruleGuideContent: {
        content: ''
      },
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          // 富文本初始化
          'emoji-toolbar': true,
          'emoji-shortname': true,
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'], // 引用，代码块
              [
                {
                  header: 1
                },
                {
                  header: 2
                }
              ], // 标题，键值对的形式；1、2表示字体大小
              [
                {
                  list: 'ordered'
                },
                {
                  list: 'bullet'
                }
              ], // 列表
              [
                {
                  script: 'sub'
                },
                {
                  script: 'super'
                }
              ], // 上下标
              [
                {
                  indent: '-1'
                },
                {
                  indent: '+1'
                }
              ], // 缩进
              [
                {
                  direction: 'rtl'
                }
              ], // 文本方向
              [
                {
                  size: ['small', false, 'large', 'huge']
                }
              ], // 字体大小
              [
                {
                  header: [1, 2, 3, 4, 5, 6, false]
                }
              ], // 几级标题
              [
                {
                  color: []
                },
                {
                  background: []
                }
              ], // 字体颜色，字体背景颜色
              [
                {
                  font: []
                }
              ], // 字体
              [
                {
                  align: []
                }
              ], // 对齐方式
              ['clean'], // 清除字体样式
              ['image', 'video'] // 上传图片、上传视频
            ],
            handlers: {
              image: function(value) {
                if (value) {
                  // 触发input框选择图片文件，并执行默认点击事件。
                  document.querySelector('.quill-img').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          },
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      }
    }
  },
  created() {
    this.getLegalDeclaration()
  },
  methods: {
    postFile(e) {
      const _this = this
      const file = e.target.files[0]
      const formData = new FormData()
      if (browserType('ie')) {
        formData.append('upLoadFile', file)
      } else {
        formData.set('upLoadFile', file)
      }
      doUploadFile(formData).then(res => {
        const quill = _this.$refs.myQuillEditor.quill // 获取富文本编辑器的编辑框、
        const img = new Image()
        img.src = res.data
        quill.focus() // 聚焦在上面
        quill.insertEmbed(quill.getSelection().index, 'image', img.src)
      })
    },
    // 保存玩法管理
    setLegalDeclaration(e) {
      e.target.blur()
      const contents = emojiEncode(this.ruleGuideContent.content)
      setLegalDeclaration({ data: contents }).then(res => {
        this.$message.success('保存成功')
      })
    },
    // 加载玩法管理
    getLegalDeclaration() {
      getLegalDeclaration().then(res => {
        if (res.data === null) return
        this.ruleGuideContent.content = emojiDecode(res.data)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
.op-container {
	margin: 20px;
	display: flex;
	flex-direction: column;
	.dialog-ruleGuide {
		width: 900px;
		padding: 60px 0;
		border-radius: 10px;
		margin: 50px auto 0;
		.editer {
			border-radius: 8px;
			float: left;
			box-sizing: border-box;
			color: #606266;
			::v-deep .ql-container {
				height: 600px;
				border-radius: 0px 0px 8px 8px;
			}
			::v-deep .ql-toolbar.ql-snow {
				border-radius: 8px 8px 0px 0px;
			}
		}
	}
	.footer {
		text-align: center;
		margin-top: 30px;
	}
}
</style>
